<!--
 * @Author: your name
 * @Date: 2020-04-02 17:06:41
 * @LastEditTime: 2020-04-02 23:16:13
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-imooc-ebook\src\components\ebook\EbookSlideContents.vue
 -->
<template>
  <div class="ebook-slide-contents">
    <!-- 搜索布局 -->
    <div class="slide-contents-search-wrapper">
      <div class="slide-contents-search-input-wrapper">
        <div class="slide-contents-search-icon">
          <span class="icon-search"></span>
        </div>
        <input type="text"
        class="slide-contents-search-input"
        v-model="searchText"
        :placeholder="$t('book.searchHint')"
        @keyup.enter.exact="search()"
        @click="showSearchPage()">
      </div>
      <div class="slide-contents-search-cancel" v-if="searchVisible" @click="hideSearchPage()">{{$t('book.cancel')}}</div>
    </div>
    <!-- 图书内容布局 -->
    <div class="slide-contents-book-wrapper" v-show="!searchVisible">
      <div class="slide-contents-book-img-wrapper">
        <img :src="cover" class="slide-contents-book-img">
      </div>
      <div class="slide-contents-book-info-wrapper">
        <!-- vuex的matedate封面的基础信息 -->
        <div class="slide-cotents-book-title" v-if="metadata.title">
          <span class="slide-contents-book-title-text">{{metadata.title}}</span>
        </div>
        <div class="slide-contents-book-author" v-if="metadata.creator">
          <span class="slide-contents-book-author-text">{{metadata.creator}}</span>
        </div>
      </div>
      <div class="slide-contents-book-progress-wrapper">
        <div class="slide-contents-book-progress">
          <span class="progress">{{progress + '%'}}</span>
          <span class="progress-text">{{$t('book.haveRead2')}}</span>
        </div>
        <div class="slide-contents-book-time">{{getReadTimeText()}}</div>
      </div>
    </div>
    <!-- 目录布局 -->
    <scroll class="slide-contents-list"
            :top="117.323"
            :bottom="36.27"
            v-show="!searchVisible">
      <div class="slide-contents-item" v-for="(item, index) in navigation" :key="index">
        <span class="slide-contents-item-label" :class="{'selected':section === index}"
        :style="contentItemStyle(item)" @click="displayContent(item.href)">{{item.label}}</span>
        <span class="slide-contents-item-page">{{item.page}}</span>
      </div>
    </scroll>
    <!-- 搜索结果列表 -->
    <scroll class="slide-search-list"
      :top="49.05328"
      :bottom="36.27"
      v-show="searchVisible">
      <div class="slide-search-item" v-for="(item, index) in searchList"
      :key="index" v-html="item.excerpt" @click="displayContent(item.cfi, true)"></div>
    </scroll>
  </div>
  <!-- :top="156" :bottom="48" -->
</template>

<script>
import { ebookMixin } from '../../utils/mixin'
import Scroll from '../common/Scroll'
import { px2rem } from '../../utils/utils'
export default {
  mixins: [ebookMixin],
  components: {
    Scroll
  },
  data() {
    return {
      searchVisible: false, // 用来控制取消按钮是否显示
      searchList: null, // 搜索的结果
      searchText: ''
    }
  },
  methods: {
    // 实现搜索
    search() {
      if (this.searchText && this.searchText.length > 0) {
        this.doSearch(this.searchText).then(list => {
        this.searchList = list
        this.searchList.map(item => {
          // 替换关键字内容，高亮显示
          item.excerpt = item.excerpt.replace(this.searchText, `<span class="content-search-text">
          ${this.searchText}</span>`)
          return item
          })
      })
      }
    },
    // 其他集成的全文搜索算法
    doSearch(q) {
      return Promise.all(
        // this.currentBook.spine.spineItems表示section，和目录时一一对应的，但跟目录右区别，section的作用时管理这一个章节下所有的内容
        // section.load获得章节信息，section.find实现当前章节的检索
        // results每一个section返回的内容，降维运算results是多维数组，
      this.currentBook.spine.spineItems.map(
        section => section.load(this.currentBook.load.bind(this.currentBook))
        .then(section.find.bind(section, q))
        .finally(section.unload.bind(section)))
        // results二维数组。apply会将数组变为参数逐一传递
        ).then(results => Promise.resolve([].concat.apply([], results)))// 数组降维
    },
    // 自定义dispaly方法，调用dispaly()后隐藏目录和标题,避免直接修改display()方法,目录全文搜索后也调用这个方法
    displayContent(target, highLight = false) {
      this.display(target, () => {
        this.hideTitleAndMenu()
        if (highLight) {
          // annotations专门用于管理高亮的内容
          this.currentBook.rendition.annotations.highlight(target)
        }
        // console.log('1')
      })
    },
    // 二级目录格式缩进
    contentItemStyle(item) {
      return {
        marginLeft: `${px2rem(item.level * 38)}rem` // 15
      }
    },
    showSearchPage() {
      this.searchVisible = true
    },
    hideSearchPage() {
      this.searchVisible = false
      this.searchText = ''
      this.searchList = null
    }
  }
  // mounted() {
  //   this.doSearch('added')
  // }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  @import "../../assets/styles/global";
  .ebook-slide-contents {
    width: 100%;
    font-size: 0;
    .slide-contents-search-wrapper {
      display: flex;
      width: 100%;
      height: px2rem(65);// 36
      margin: px2rem(30) 0 px2rem(20) 0;// 20 0 10 0
      padding: 0 px2rem(20);// 15
      box-sizing: border-box;
      .slide-contents-search-input-wrapper {
        flex: 1;
        @include center;
        .slide-contents-search-icon {
          padding: px2rem(10);//无
          flex: 0 0 px2rem(28);
          font-size: px2em(12);
          @include center;
        }
        .slide-contents-search-input {
          flex: 1;
          width: 100%;
          height: px2rem(32);
          font-size: px2rem(14);
          background: transparent;
          border: none;
          // 处理选中有边框
          &:focus {
            outline: none;
          }
        }
      }
      .slide-contents-search-cancel {
        padding: px2rem(5);//无
        flex: 0 0 px2rem(60);// 50
        font-size: px2rem(30);//14
        @include right;
      }
    }
    .slide-contents-book-wrapper {
      // 前端消除空格的方法
      font-size: 0;
      display: flex;
      width: 100%;
      height: px2rem(180);// 90
      padding: px2rem(20) px2rem(20) px2rem(25) px2rem(20);//10 15 20 15
      box-sizing: border-box;
      // background: orange;
      .slide-contents-book-img-wrapper {
        flex: 0 0 px2rem(70);// 45
        .slide-contents-book-img {
          width: px2rem(80);// 45
          height: px2rem(105);// 60
        }
      }
      .slide-contents-book-info-wrapper {
        flex: 1;
        padding: 0 px2rem(16);//10
        .slide-cotents-book-title {
          //375*0.85=318.75-30=288.75-20=268.75-45=223.75-70=153.75 //173.75
          // 375*0.85=318.75-40=278.75-30=248.75-70=178.75-150=28.75
          // width: px2rem(465);//153.75
          font-size: px2rem(27);//14
          line-height: px2rem(30);//16
          @include left;
          .slide-contents-book-title-text {
            // 设置三行显示
            @include ellipsis2(3)
          }
        }
        .slide-contents-book-author {
          // width: px2rem(465);
          font-size: px2rem(28);//12
          line-height: px2rem(32); // 14
          margin-top: px2rem(9);//5
          @include left;
          .slide-contents-book-author-text {
            @include ellipsis2(1);
          }
        }
      }
      .slide-contents-book-progress-wrapper {
        flex: 0 0 px2rem(155);// 70
        .slide-contents-book-progress {
          .progress {
            font-size: px2rem(14);
          }
          .progress-text {
            font-size: px2rem(12);
          }
        }
        .slide-contents-book-time {
          font-size: px2rem(12);
          margin-top: px2rem(13);//5
        }
      }
    }
    .slide-contents-list {
      padding: 0 px2rem(20);//15
      box-sizing:border-box;
      .slide-contents-item {
        display: flex;
        padding: px2rem(33) 0;// 20
        box-sizing:border-box;
        .slide-contents-item-label {
          // 自动计算宽度，ellipsis要指定宽度
          flex: 1;
          font-size: px2rem(30);// 14
          @include ellipsis;
          line-height: px2rem(34);// 16
        }
        .slide-contents-item-page {
          flex: 0 0 px2rem(30);
          font-size: px2rem(10);
          @include left;
        }
      }
    }
    .slide-search-list {
      padding: 0 px2rem(20);//15
      box-sizing: border-box;
      .slide-search-item {
        font-size: px2rem(26);//14
        line-height: px2rem(38);//16
        padding: px2rem(28) 0;//20
        box-sizing: border-box;
      }
    }
  }
</style>
